<template>
  <view class="" :class="ggclass">
    <view
      class="select-item"
      @click.capture="spread"
      
    >
	<!-- :style="{ padding: `0 ${padd}rpx`, width, height }" -->
      <view class="item" v-if="name">
        <slot></slot><text>{{ name }}</text>
        <text
          class="iconfont icon-xiajiantou mg_l10"
          :style="{ transform: `rotate(${num}deg)`, transition: '0.5s' }"
        >
        </text>
      </view>
      <view class="item" v-else>
        <slot></slot><text class="grey">{{ hint }}</text>
        <text
          class="iconfont icon-xiajiantou mg_l10"
          :style="{ transform: `rotate(${num}deg)`, transition: '0.5s' }"
        >
        </text>
      </view>
    </view>

    <uni-popup ref="popRef" :round="50" :safe-area="false" @change="changePop">
      <view class="picker-view-box" :style="{background:backgrounds}">
        <view class="picker-title">
          <text class="" @click="close">取消</text>
          <view class="font_s32 font-weight">{{ title }}</view>
          <text class="blue" @click="submit">确定 </text>
        </view>
        <view class="date-box mg_t40">
          <view class="date" :class="{ pitch: index === 0 }" @click="cut(0)">
            {{ filter(startDate) }}
          </view>
          <text>至</text>
          <view class="date" :class="{ pitch: index === 1 }" @click="cut(1)">
            {{ filter(endDate) }}
          </view>
        </view>
        <picker-view
          v-if="visible"
          :indicator-style="indicatorStyle"
          :value="values"
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in years" :key="index"
              >{{ item }}年</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in months" :key="index"
              >{{ item }}月</view
            >
          </picker-view-column>
          <picker-view-column>
            <view class="item" v-for="(item, index) in days" :key="index"
              >{{ item }}日</view
            >
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import { dateFilter as filter } from "../ways/filter";
const date = new Date();
import {
  defineProps,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
  computed
} from "vue";
const { proxy } = getCurrentInstance() as any;
const Cinput = inject("Cinput");
const props = defineProps({
  title: {
    type: String,
    default: "自定义",
  },
  ggclass: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: Array,
    default: () => [2022, date.getMonth(), date.getDate() - 1],
  },
  range_key: {
    type: String,
    default: "name",
  },
  range_value: {
    type: String,
    default: "id",
  },
  immediate: {
    type: Boolean,
    default: false,
  },
  hint: {
    type: String,
    default: "时间筛选",
  },
});
interface stateType {
  values: any[];
  [key: string]: any; // 其他可能的属性
}
const state: stateType = reactive({
  visible: false,
  years: [],
  year: date.getFullYear(),
  months: [],
  month: date.getMonth() + 1,
  days: [],
  day: date.getDate(),
  values: [],
  indicatorStyle: `height: 50px;`,
  index: 0,
  startDate: date,
  endDate: date,
  name: "",
  num: 0,
});
const {
  num,
  visible,
  years,
  year,
  months,
  month,
  days,
  day,
  values,
  indicatorStyle,
  index,
  startDate,
  endDate,
  name,
} = toRefs(state);
onMounted(() => {
  for (let i = state.year; i <= state.year + 10; i++) {
    state.years.push(i);
  }
  state.months = getMonths(state.year);
  state.days = getDate(state.year, state.month);
  state.values = [...props.modelValue];
});
const changePop = (e: any) => {
  if (e.show) {
    state.num = 180;
  } else {
    state.num = 0;
  }
};
const close = () => {
  proxy.$refs.popRef.close();
  state.visible = false;
};
const spread = () => {
  if (props.disabled) return;
  proxy.$refs.popRef.open("bottom");
  state.visible = true;
  setValues(state.index);
};
const cut = (e: any) => {
  state.index = e;
  setValues(state.index);
};
const getMonths = (year: number) => {
  let months: Array<number> = [];
  let num = 1;
  if (year == state.year) {
    num = state.month;
  }
  for (num; num <= 12; num++) {
    months.push(num);
  }
  return months;
};
const getDate = (year: number, month: number) => {
  let days = [];
  let num = 1;
  if (year == state.year && month == state.month) {
    num = date.getDate();
  }
  for (num <= new Date(year, month, 0).getDate(); num++; ) {
    days.push(num);
  }
  return days;
};
const show = () => {
  proxy.$refs.popRef.open("bottom");
  state.visible = true;
  setValues(state.index);
};
const setValues = (index: number) => {
  let defaultValues: any = [];
  if (index) {
    defaultValues = filter(state.endDate).split("-");
  } else {
    defaultValues = filter(state.startDate).split("-");
  }
  state.values = [
    state.years.findIndex((v: number) => v == defaultValues[0]),
    state.months.findIndex((v: number) => v == defaultValues[1]),
    state.days.findIndex((v: number) => v == defaultValues[2]),
  ];
};
const bindChange = (e: any) => {
  const val = e.detail.value;
  let year = state.years.find((v: number, i: number) => val[0] == i);
  let month = state.months.find((v: number, i: number) => val[1] == i);
  let day = state.days.find((v: number, i: number) => val[2] == i);
  state.months = state.getMonths(year);
  state.days = state.getDate(year, month - 1);
  let data = [year, month, day].join("/");
  if (state.index) {
    state.endDate = new Date(data);
  } else {
    state.startDate = new Date(data);
  }
};
const backgrounds = computed(() => {
  return proxy.$color.theme.pageBgColor;
})
const submit = () => {
  close();
  uni.showLoading();
  let time = setTimeout(() => {
    let params = {
      startTime: filter(state.startDate, "yyyy/MM/dd"),
      endTime: filter(state.endDate, "yyyy/MM/dd"),
    };
    proxy.$emit("change", params);
    proxy.$emit("input", params);
    state.name = `${params.startTime}-${params.endTime}`;
    uni.hideLoading();
    clearTimeout(time);
    state.$nextTick(() => {
      typeof state.Cinput.verify === "function" && state.Cinput.verify();
    });
  }, 1000);
};
</script>
<style lang="scss" scoped>
.picker-view-box {
  position: relative;
  z-index: 1000;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
}

.picker-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.picker-view {
  width: 750rpx;
  height: 500rpx;
  // margin-top: 20rpx;
}

.item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.date-box {
  display: flex;
  justify-content: space-between;
  padding: 0 80rpx;

  .date {
    font-size: 36rpx;
    color: #333333;
    border-bottom: 2rpx #cecece solid;
    padding-bottom: 10rpx;
  }

  & > .pitch {
    color: $uni-color-main;
    border-bottom: 2rpx solid $uni-color-main;
  }
}

.select-item {
  // height: 70rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
}

.icon-xiajiantou {
  display: inline-block;
}
</style>